<template>
  <div id="index">
    <div class="row">
      <div class="col col-1">
        <div class="row">
          <regional-overview></regional-overview>
        </div>
      </div>
      <div class="col col-2">
        <div class="row">
          <state-station></state-station>
        </div>
      </div>
      <div class="col col-3">
        <div class="row">
          <weather></weather>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import StateStation from "./StateStation";
import RegionalOverview from "./RegionalOverview";
import Weather from "./Weather";

export default {
  components: {
    StateStation,
    RegionalOverview,
    Weather
  }
};
</script>

<style lang="stylus" scoped>
#index
  position relative
  width 100%
  height 100%
  z-index 9

  > .row
    margin-left 390px
    width 3450px
    height 100%

    > .col
      height 100%

    > .col-1
      width 980px

      > .row
        height 100%
        padding 0 120px 0 80px

    > .col-2
      width 1260px

      > .row
        height 100%
        padding 0 280px 0 180px

    > .col-3
      width 1090px

      > .row
        height 100%
        padding 0 40px

#index::before
  content ''
  position absolute
  width 3840px
  height 100%
  background url("../../assets/img/index/20200605174220.jpg") no-repeat top left
  background-size 3840px 1080px
  z-index -1
</style>
